<template>
  <!-- 地图map -->
  <div>
    <div :id="chartId" class="chart"></div>
  </div>
</template>

<script>
import {mapState} from 'vuex'
import Ecolors from '@/utils/chartColors'
import {hexToRgba, resize, toolboxFullScreen} from '@/utils/utils'

export default {
  mixins: [resize],
  props: {
    chartId: {
      type: String
    },
    chartData: {
    }
  },
  data() {
    return {
      chart: null,
      seriesData: [],
    }
  },
  computed: {
    ...mapState(['curChartConfig'])
  },
  methods: {
    getCurChartConfig() {
      if (Object.keys(this.curChartConfig).length > 0) {
        let colors = []
        this.curChartConfig.colors.forEach(v => {
          colors.push(v.color)
        })
        this.colors = [...colors, ...Ecolors.color]
        // let graphType = this.curChartConfig.graphType
        // if (this.curChartConfig.graphType === 'bar1') {
        //   graphType = 'bar'
        // } else if (this.curChartConfig.graphType === 'bar2') {
        //   graphType = 'bar'
        // }
        // this.graphType = graphType
      }
      if (Object.keys(this.chartData).length > 0) {
        this.init()
      }
    },
    getSeriesData() {
      let mapName = this.chartData.mapName
      let mapData = this.chartData.mapData
      this.$echarts.registerMap(mapName, mapData)

      let seriesData = [
        {
          type: 'map',  // graphType: 'bar',
          map: mapName,
          label: {
            show: this.curChartConfig['showLabel'],
            fontSize: this.curChartConfig['fontSize'] || 12
          },
          itemStyle: {
            borderColor: "#fff"
          },
          emphasis: {
            itemStyle: {
              label: { show: true },
              areaColor: "#ffb478",
              color: "#fff",
              borderColor: "#fff"
            }
          },
          data: this.chartData.data
        }
      ]
      return seriesData
    },
    init() {
      let seriesData = this.getSeriesData()
      let allvalue = []
      this.chartData.data.forEach(v => {
        allvalue.push(v.value)
      })
      // 背景色
      let backgroundColor =  this.curChartConfig['showBgColor'].checked ? this.curChartConfig['showBgColor'].color :'#fff'
      let option = {
        tooltip: {
          confine: true,
          show: true,
          trigger: 'item',
          backgroundColor: "#fff",
          extraCssText: "box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);",
          borderRadius: 0,
          padding: 5,
          textStyle: {
            color: "#000"
          },
          formatter: (params) => {
            let marker = params.marker
            let data = params.data
            let str = `${marker}${data.name}:${data.value}`
            return str
          }
        },
        backgroundColor,
        visualMap: {
          type: 'piecewise',
          show: this.curChartConfig['showLegend'],
          left: '5%',
          bottom: '40px',
          min: 0,
          max: Math.max(...allvalue),
          text: ['高', '低'],
          showLabel: false,
          itemGap: 0,
          textGap: 50,
          inRange: {
            color: ["#ced1f3", "#b0b4e6", "#9095d7", "#767ccb", "#4950b7"] // this.colors.slice(0, 5) //["#ced1f3", "#b0b4e6", "#9095d7", "#767ccb", "#4950b7"]
          }
          
        },
        series: seriesData
      }

      // 后台报告下载
      this.chart.on('rendered', () => {
        let tempId = this.$route.query.tempId
        if (tempId) {
          this.getEchartImg(this.chart.getDataURL())
        }
      })
      this.chart.clear()
      this.chart.setOption(option, true)

      this.$emit('chartDom', this.chart)
    },
    getEchartImg(base) {
      window.echartImg = base
    }
  },
  watch: {
    curChartConfig: {
      deep: true,
      handler: function() {
        this.getCurChartConfig()
      }
    },
    chartData() {
      if (Object.keys(this.chartData).length <= 0) {
        if (this.chart) this.chart.clear()
      } else {
        this.getCurChartConfig()
      }
    }
  },
  mounted() {
    this.chart = this.$echarts.init(document.getElementById(this.chartId))
    this.getCurChartConfig()
  },
  destroyed() {
    this.chart.dispose()
    this.chart = null
  }
}
</script>

<style lang="scss" scoped>
.chart {
  height: 500px;
  background-color: #fff;
}
</style>